<template>
  <div class="shareContainer" ref="shareContainer">
    <div class="sharecontent">
      <!-- 头部内容 -->
      <div class="sharecontent_header">
        <div class="sharecontent_header_right">
          <el-button
            v-permission="'company_thermometer_create'"
            type="primary"
            data-tracker="P29-3"
            @click="handleClick()"
            plain
            style="margin: 0px 10px 10px 0px"
            >新增</el-button
          >
          <el-button
            v-permission="'company_thermometer_delete'"
            type="primary"
            data-tracker="P29-4"
            @click="PageDeleteThermomenter()"
            plain
            style="margin: 0px 10px 10px 0px"
            >删除</el-button
          >
        </div>
        <div style="display: flex">
          <div>
            <el-button
              type="primary"
              size="mini"
              @click="resetquery"
              style="margin: 0px 10px 0px 0px"
              >重置</el-button
            >
          </div>
          <div>
            <SettinUp
              :settype="35"
              :objSettinUpdata="objSettinUp"
              key="3"
            ></SettinUp>
          </div>
        </div>
      </div>
      <!-- 表单内容 -->
      <div class="sharecontent_content">
        <TableHeader
          ref="TableHeaderList"
          :header_data_list="header_data_list"
          :HeaderData="HeaderData"
          :propMap="propMap"
          :objheader="objheader"
          @childEvent="handleDelete"
          @orderIdNumsEvent="handleDeleteType"
          :operation_type="operation_type"
          @handleClickDetail_second="handleClickDetail_second"
          @handleClickEdit_second="handleClickEdit_second"
          particulars="finance_invoice_book_list"
          redact="finance_invoice_book_update"
        >
        </TableHeader>
      </div>
      <div class="sharecontent_header_left">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryparam.page"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="queryparam.page_size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
      <!-- 弹框内容 -->
      <div>
        <el-dialog
          :title="title_name"
          :close-on-click-modal="false"
          :visible.sync="dialogVisible"
          width="700px"
        >
          <div>
            <el-form
              :inline="true"
              class="demo-form-inline"
              label-width="120px"
              :model="ruleForm"
              :rules="rules"
              ref="ruleForm"
            >
              <el-form-item label="编号" prop="serial_number">
                <el-input
                  placeholder="编号"
                  v-model="ruleForm.serial_number"
                  style="width: 108%"
                ></el-input>
              </el-form-item>

              <el-form-item label="生产厂家" prop="temperature_firm_id">
                <el-select
                  v-model="ruleForm.temperature_firm_id"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in Generate_vendor"
                    :key="item.key"
                    :label="item.value"
                    :value="item.key"
                  >
                  </el-option>
                </el-select>
              </el-form-item>

              <!-- <el-form-item label="名称" prop="name">
                <el-input placeholder="名称" v-model="ruleForm.name"></el-input>
              </el-form-item> -->
              <el-form-item label="数据传输类型" prop="thermometer_type">
                <el-select
                  v-model="ruleForm.thermometer_type"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in incubatorType"
                    :key="item.item_code"
                    :label="item.item_name"
                    :value="item.item_code"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="测温区间" label-width="105px">
                <el-input
                  placeholder="示例，10-20"
                  v-model="ruleForm.temp_measure_range"
                  style="width: 108%"
                ></el-input>
              </el-form-item>
              <!-- <el-form-item label="是否对外共享">
                <el-switch v-model="ruleForm.shared" active-color="#13ce66" inactive-color="#ff4949" active-value="1"
                  inactive-value="0">
                </el-switch>
              </el-form-item> -->
              <el-form-item label="租赁/自有" prop="ownership_type">
                <el-select
                  v-model="ruleForm.ownership_type"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in options"
                    :key="item.item_code"
                    :label="item.item_name"
                    :value="item.item_code"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="网点" label-width="105px">
                <el-select v-model="ruleForm.branch_id" placeholder="请选择">
                  <el-option
                    v-for="item in originList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="备注" style="width: 200%">
                <el-input
                  placeholder="备注"
                  v-model="ruleForm.remark"
                  style="width: 285%"
                ></el-input>
              </el-form-item>
              <!-- <el-form-item label="共享区域" v-if="ruleForm.shared == 1" prop="shared_website">
                <el-select v-model="ruleForm.shared_website" multiple placeholder="请选择">
                  <el-option v-for="item in originList" :key="item.id" :label="item.name" :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item> -->
              <el-form-item label="电量" prop="power" v-if="orderstate != '0'">
                <el-input v-model="ruleForm.power" disabled></el-input>
              </el-form-item>
              <br />
              <el-form-item label="校准报告">
                  <UploadLink :files.sync="ruleForm.adjust_report"></UploadLink>
              </el-form-item>
              <br />
              <el-form-item label="是否启用" prop="status">
                <el-switch
                  v-model="ruleForm.status"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                  active-value="0"
                  inactive-value="1"
                >
                </el-switch>
              </el-form-item>
            </el-form>
          </div>
          <span slot="footer" class="dialog-footer">
            <el-button
              :data-tracker="orderstate == '0' ? 'P29-8' : 'P29-10'"
              @click="dialogVisible = false"
              >取 消</el-button
            >
            <!-- 代表创建的确定 -->
            <el-button
              type="primary"
              data-tracker="P29-7"
              @click="PageAddThermometer('ruleForm')"
              v-if="orderstate == '0'"
              >确 定
            </el-button>
            <!-- 修改的确定 -->
            <el-button
              type="primary"
              data-tracker="P29-9"
              @click="PageEditThermometer('ruleForm')"
              v-if="orderstate == '2'"
              >确 定
            </el-button>
          </span>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
import TableHeader from "@/page/orderform/components/TableHeader/tableheader.vue";
import SettinUp from "@/page/orderform/components/settingUp/settingUp.vue";
import {
  EditThermometer,
  DeleteThermomenter,
  DetailsThermometer,
  AddThermometer,
  QueryThermometer,
  Firmoptions,
  firm_Auth_options
} from "@/api/information";
import { PagewebsiteList, dictionanryList } from "../common/common";
import UploadLink from "@/components/uploadFile/uploadLink.vue";

export default {
  components: { TableHeader, SettinUp, UploadLink },
  data() {
    return {
      title_name: "温度计",
      value123: "1",
      Generate_vendor: [],
      ruleForm: {
        temperature_firm_id: "", //生产厂家id
        manufacturer: "", //生产厂家
        serial_number: "", //编号
        name: "", //名称
        thermometer_type: "0", //类型
        temp_measure_range: "-100-100", //测温区间
        shared: "0", //是否对外共享
        ownership_type: "1", //内部
        branch_id: "", //网点ID
        status: "0", //状态
        remark: "", //备注
        shared_website: [], //共享区域
        adjust_report:[],
      },
      rules: {
        temperature_firm_id: [
          { required: true, message: "生产厂家", trigger: "blur" },
        ],
        serial_number: [{ required: true, message: "编号", trigger: "blur" }],
        name: [{ required: true, message: "名称", trigger: "blur" }],
        thermometer_type: [
          { required: true, message: "类型", trigger: "blur" },
        ],
        temp_measure_range: [
          { required: true, message: "测温区间", trigger: "blur" },
        ],
        status: [{ required: true, message: "状态", trigger: "blur" }],
        ownership_type: [{ required: true, message: "来源", trigger: "blur" }],
        shared_website: [
          { required: true, message: "请填写共享区域", trigger: "blur" },
        ],
        branch_id: [
          { required: true, message: "请填写共享区域", trigger: "blur" },
        ],
      },
      originList: [], // 组织管理
      // 搜索函数
      queryparam: {
        page: 1,
        page_size: 20,
        // name: "", // 名称
        // temperature_firm_id: "", // 厂商
        // serial_number: "", // 编号
      },
      deletparam: {
        id: [], //多选删的id
      },
      // 分页功能
      total: 0, //总条数
      currentPage4: 1,
      orderstate: "", //判断选中后的的确认按钮
      consignerID: "", //修改传递的Id
      tableData: [
        {
          incubatornum: "123456", //温度计编号
          incubatortype: "实时", //温度计类型
          incubatorsource: "自有", //温度计来源
          incubatorvender: "北京", //生产厂家
          incubatororgin: "华北", //组织
          incubatorName: "CB10", //名称
          incubatorwhitout: "10——20", //
          incubatordetails: "北京的箱子", //描述信息
          incubatorstate: "启用", //保温箱的状态
          incubatorShare: "共享", //是否共享
          incubatorShareArer: "华北地区", //共享区域
        },
      ],
      dialogVisible: false, //判断弹框显示隐藏
      //来源
      options: [],
      //温度计类型
      incubatorType: [],
      // 温层
      thermosphere: [],
      maxheight: 400,
      header_data_list: [],
      propMap: {},
      obj_list: {},
      HeaderData: [],
      waybillIdNums: [],
      totalPage: 0,
      operation_type: 1,
      disableddata: false,
      incubatorType: [
        {
          item_code: "1",
          item_name: "离线",
        },
        {
          item_code: "0",
          item_name: "实时",
        },
      ],
    };
  },
  mounted() {
    // 数据字典
    this.Datadictionary();
    // 获取组织接口
    this.siteList();
    // 数据列表
    this.PageQueryThermometer();

    // 温度计厂商
    this.Firmoptionspage();
  },
  methods: {
    // 温度计厂商
    Firmoptionspage() {
      var param = {};
      firm_Auth_options(param).then((res) => {
        if (res.code == "10000") {
          this.Generate_vendor = res.data.options;
        }
      });
    },
    // 同生成厂商id去查找厂商
    findFirmoptionspage(id) {
      if (id != undefined) {
        var name_value = this.Generate_vendor.find((item) => {
          return item.key == id;
        });
        this.ruleForm.manufacturer = name_value.value;
      }
    },
    // 数据字典接口
    Datadictionary() {
      var param = [
        "thermosphere", //温层
        "ownership_ty", //来源
        "thermometer", // 温度计类型
      ];
      dictionanryList(param).then((res) => {
        var res = res.data;
        this.incubatorType = res.list.thermometer;
        //温层
        this.thermosphere = res.list.thermosphere;
        //来源
        this.options = res.list.ownership_ty;
      });
    },
    // 获取多选删除的id号
    handleSelectionChange(val) {
      var deleid = [];
      for (var i = 0; i < val.length; i++) {
        deleid.push(val[i].id);
      }
      this.deletparam.id = deleid;
    },
    //修改
    handleClick(row, type) {
      if (row == undefined) {
        this.title_name = "创建温度计";
        this.orderstate = "0";
        this.openpop();
        // this.clearList();
        Object.assign(this.$data.ruleForm, this.$options.data().ruleForm);
      } else if (row != "" && type == 1) {
        this.title_name = "查看温度计";
        // 将修改的状态赋值为空
        this.orderstate = "";
        this.PageDetailsThermometer(row.id);
        this.openpop();
      } else if (row != "" && type == 2) {
        this.title_name = "修改温度计";
        this.orderstate = "2";
        this.consignerID = row.id;
        this.PageDetailsThermometer(row.id);
        this.openpop();
      }
    },
    // 一页有多少条
    handleSizeChange(val) {
      this.queryparam.page_size = val;
      //  数据列表接口
      this.PageQueryThermometer();
    },
    // 当前第几页
    handleCurrentChange(val) {
      this.queryparam.page = val;
      //  数据列表接口
      this.PageQueryThermometer();
    },
    // 组织管理页面
    siteList() {
      PagewebsiteList("0").then((res) => {
        this.originList = res.data;
      });
    },
    // 温度计编辑
    PageEditThermometer(formName) {
      this.$refs[formName].validate((valid) => {
        this.findFirmoptionspage(this.ruleForm.temperature_firm_id);
        if (valid) {
          var param = {
            id: this.consignerID,
            temperature_firm_id: this.ruleForm.temperature_firm_id,
            manufacturer: this.ruleForm.manufacturer,
            serial_number: this.ruleForm.serial_number,
            name: this.ruleForm.serial_number,
            thermometer_type: this.ruleForm.thermometer_type,
            temp_measure_range:
              this.ruleForm.temp_measure_range == ""
                ? "-100-100"
                : this.ruleForm.temp_measure_range,
            shared: this.ruleForm.shared,
            ownership_type: this.ruleForm.ownership_type,
            branch_id: String(this.ruleForm.branch_id),
            status: String(this.ruleForm.status),
            remark: this.ruleForm.remark,
            shared_website: this.ruleForm.shared_website,
            adjust_report: this.ruleForm.adjust_report,
          };
          EditThermometer(param).then((res) => {
            if (res.code == 10000) {
              this.$message({
                message: "修改成功",
                type: "success",
              });
              this.cancledata();
              this.PageQueryThermometer();
            }
          });
        } else {
          // console.log("error submit!!");
          return false;
        }
      });
    },
    // 温度计详情
    PageDetailsThermometer(id) {
      var params = {
        id: id,
      };
      DetailsThermometer(params).then((res) => {
        var res = res.data;
        var sharedWeList = [];
        if (res.shared_website != null) {
          res.shared_website.forEach((res) => {
            sharedWeList.push(res.id);
          });
        }
        res.branch_id = res.branch_id == 0 ? "" : res.branch_id;
        this.ruleForm.temperature_firm_id =
          res.temperature_firm_id == 0 ? "" : res.temperature_firm_id; //生产厂家
        this.ruleForm.serial_number = res.serial_number; //编号
        this.ruleForm.name = res.name; //名称
        this.ruleForm.thermometer_type = res.thermometer_type; //类型
        this.ruleForm.temp_measure_range = res.temp_measure_range; //测温区间
        this.ruleForm.shared = res.shared; //是否对外共享
        this.ruleForm.ownership_type = res.ownership_type; //内部
        this.ruleForm.branch_id = res.branch_id; //网点ID
        this.ruleForm.status = res.status; //状态
        this.ruleForm.remark = res.remark; //备注
        this.ruleForm.shared_website = sharedWeList; //共享区域
        this.ruleForm.power = res.power;
        this.ruleForm.adjust_report = res.adjust_report;
      });
    },
    // 温度计添加
    PageAddThermometer(formName) {
      this.$refs[formName].validate((valid) => {
        this.findFirmoptionspage(this.ruleForm.temperature_firm_id);
        if (valid) {
          var parma = {
            temperature_firm_id: this.ruleForm.temperature_firm_id, //生产厂家
            manufacturer: this.ruleForm.manufacturer, //生产厂家
            serial_number: this.ruleForm.serial_number, //编号
            name: this.ruleForm.serial_number, //名称
            thermometer_type: this.ruleForm.thermometer_type, //类型
            temp_measure_range:
              this.ruleForm.temp_measure_range == ""
                ? "-100-100"
                : this.ruleForm.temp_measure_range, //测温区间
            shared: this.ruleForm.shared, //是否对外共享
            ownership_type: this.ruleForm.ownership_type, //内部
            branch_id: String(this.ruleForm.branch_id), //网点ID
            status: this.ruleForm.status, //状态
            remark: this.ruleForm.remark, //备注：
            shared_website: this.ruleForm.shared_website,
            adjust_report: this.ruleForm.adjust_report,
          };
          AddThermometer(parma).then((res) => {
            if (res.code == 10000) {
              this.$message({
                message: "创建成功",
                type: "success",
              });
              this.cancledata();
              this.PageQueryThermometer();
            }
          });
        } else {
        }
      });
    },
    queryList() {
      this.queryparam.page = 0;
      this.PageQueryThermometer();
    },
    // 温度计查询
    PageQueryThermometer(val) {
      var param = {
        ...this.queryparam,
        header_id: 35 + "",
      };
      QueryThermometer(param).then((res) => {
        this.orders = res.data.list || [];
        this.orders.unshift({});
        this.header_data_list = this.orders;
        this.HeaderData = res.data.item_list;
        this.Fntransformation(this.HeaderData);
        this.total = res.data.pagination.total;
      });
    },
    // // 数据处理、
    // manangeData(list) {
    //   // 共享网点
    //   list.forEach((res) => {
    //     var websitList = [];
    //     if (res.shared_website != null) {
    //       for (var i = 0; i < res.shared_website.length; i++) {
    //         websitList.push(res.shared_website[i].name + "/");
    //       }
    //     }
    //     res.thermometer_type = res.thermometer_type == "0" ? "实时" : "离线";
    //     res.shared = res.shared == "0" ? "不共享" : "共享"; //共享
    //     res.ownership_type = res.ownership_type == "0" ? "内部" : "租赁"; //内部外部
    //     res.status = res.status == "0" ? "启用" : "禁用"; //是否启用
    //     res.shared_website = websitList;
    //   });
    //   this.tableData = list;
    // },
    // 温度计删除
    PageDeleteThermomenter() {
      var param = {
        id: this.waybillIdNums,
      };
      DeleteThermomenter(param).then((res) => {
        this.$message({
          message: "删除成功",
          type: "success",
        });
        // 刷新列表
        this.PageQueryThermometer();
      });
    },
    // 点击取消
    cancledata() {
      // 清空数据
      this.closepop();
      // this.clearList();
    },
    // 关闭弹框的函数
    closepop() {
      this.dialogVisible = false;
    },
    openpop() {
      this.dialogVisible = true;
    },
    // 清除数据
    clearList() {
      // this.ruleForm = {
      //   temperature_firm_id: "", //生产厂家
      //   serial_number: "", //编号
      //   name: "", //名称
      //   thermometer_type: "", //类型
      //   temp_measure_range: "", //测温区间
      //   shared: "0", //是否对外共享
      //   ownership_type: "", //内部
      //   branch_id: "", //网点ID
      //   status: "0", //状态
      //   remark: "", //备注
      //   shared_website: [], //共享区域
      // };
    },
    // 重置
    resetquery() {
      this.$refs.TableHeaderList.childMethod();
    },
    // ===
    objheader(obj) {
      var data = {
        header_id: 35 + "",
        ...obj,
        ...this.queryparam,
      };
      this.obj_list = obj;
      QueryThermometer(data).then((res) => {
        this.header_data_list = res.data.list;
        if (res.code === 10000 && res.data.list !== null) {
          this.header_data_list.unshift({});
          this.total = res.data.pagination.total;
        } else {
          this.header_data_list = [{}];
          this.paginations.total = 0;
          this.orderslength = 0;
          this.total = res.data.pagination.total;
          // this.orderslength = 0;
        }
      });
    },
    Fntransformation(obj) {
      const result = {};
      for (const prop in obj) {
        if (obj.hasOwnProperty(prop)) {
          if (obj[prop].send_name !== "") {
            result[obj[prop].name] = obj[prop].show_name;
          } else {
            result[obj[prop].name] = obj[prop].name;
          }
        }
      }
      this.propMap = result;
    },
    handleDelete(index, id, type) {
      this.handleJumpDetail(id);
    },
    handleDeleteType(value) {
      this.waybillIdNums = value;
    },
    handleClickDetail_second(val) {
      this.handleClick(val, "1");
    },
    handleClickEdit_second(val) {
      this.handleClick(val, "2");
    },
    objSettinUp() {
      this.PageQueryThermometer();
    },
  },
};
</script>

<style lang="less" scoped>
.shareContainer {
  padding: 10px 15px;
  background-color: #fff;

  .shareheader {
    background: white;

    .shareheader_top {
      display: flex;
      flex-wrap: wrap;
    }
  }

  .sharecontent_header_left {
    display: flex;
    margin: 10px 0px 0px 0px;
    justify-content: flex-end;
  }

  // 内容
  .sharecontent {
    background: white;

    // 头部内容
    .sharecontent_header {
      display: flex;
      justify-content: space-between;
      /* .sharecontent_header_right {
          display: inline-block;
        } */
    }

    // 表单内容
    .sharecontent_content {
    }
  }
}
</style>